<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<CustomNavbar title="主题演示" />

		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-bg"></view>
			<view class="header-content">
				<text class="page-title">🎨 主题展示</text>
				<text class="page-subtitle">松鼠记账多主题预览</text>
			</view>
		</view>

		<!-- 主题切换器 -->
		<view class="theme-switcher-section">
			<view class="switcher-title">
				<text class="title-text">当前主题：{{currentTheme.name}} {{currentTheme.icon}}</text>
			</view>
			<view class="theme-tabs">
				<view 
					v-for="theme in themes" 
					:key="theme.id"
					class="theme-tab"
					:class="{ active: theme.id === currentTheme.id }"
					@click="switchTheme(theme.id)"
					:style="getTabStyle(theme)"
				>
					<text class="tab-icon">{{theme.icon}}</text>
					<text class="tab-name">{{theme.name}}</text>
				</view>
			</view>
		</view>

		<!-- 界面预览区域 -->
		<view class="preview-section">
			<view class="section-title">界面预览</view>
			
			<!-- 模拟记账卡片 -->
			<view class="preview-card">
				<view class="card-header">
					<text class="card-title">今日概览</text>
					<text class="card-date">{{currentDate}}</text>
				</view>
				
				<view class="balance-overview">
					<view class="balance-item income">
						<view class="balance-icon">💰</view>
						<view class="balance-info">
							<text class="balance-label">收入</text>
							<text class="balance-amount">+2,580.00</text>
						</view>
					</view>
					<view class="balance-item expense">
						<view class="balance-icon">💸</view>
						<view class="balance-info">
							<text class="balance-label">支出</text>
							<text class="balance-amount">-1,850.00</text>
						</view>
					</view>
					<view class="balance-item total">
						<view class="balance-icon">💎</view>
						<view class="balance-info">
							<text class="balance-label">结余</text>
							<text class="balance-amount">+730.00</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 模拟记录列表 -->
			<view class="records-preview">
				<view class="records-header">
					<text class="records-title">最近记录</text>
					<text class="view-all">查看全部 ></text>
				</view>
				
				<view class="records-list">
					<view v-for="(record, index) in demoRecords" :key="index" class="record-item">
						<view class="record-icon" :style="{ backgroundColor: record.color }">
							{{record.icon}}
						</view>
						<view class="record-content">
							<text class="record-title">{{record.title}}</text>
							<text class="record-category">{{record.category}}</text>
						</view>
						<view class="record-amount">
							<text class="amount-text" :class="record.type">{{record.amount}}</text>
							<text class="record-time">{{record.time}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 模拟按钮组 -->
			<view class="buttons-preview">
				<view class="buttons-title">按钮样式</view>
				<view class="buttons-group">
					<button class="demo-btn primary">主要按钮</button>
					<button class="demo-btn secondary">次要按钮</button>
					<button class="demo-btn success">成功按钮</button>
					<button class="demo-btn warning">警告按钮</button>
					<button class="demo-btn error">错误按钮</button>
				</view>
			</view>

			<!-- 模拟输入框 -->
			<view class="inputs-preview">
				<view class="inputs-title">输入框样式</view>
				<view class="inputs-group">
					<input class="demo-input" placeholder="请输入金额" type="number" />
					<input class="demo-input" placeholder="请输入备注" />
					<textarea class="demo-textarea" placeholder="请输入详细说明..."></textarea>
				</view>
			</view>

			<!-- 模拟标签 -->
			<view class="tags-preview">
				<view class="tags-title">标签样式</view>
				<view class="tags-group">
					<text class="demo-tag">生活费</text>
					<text class="demo-tag">餐饮</text>
					<text class="demo-tag">交通</text>
					<text class="demo-tag">娱乐</text>
					<text class="demo-tag">购物</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import themeManager from '@/utils/theme.js'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	
	export default {
		components: {
			CustomNavbar
		},
		data() {
			return {
				themes: [],
				currentTheme: {},
				currentDate: '',
				demoRecords: [
					{
						icon: '🍔',
						title: '午餐',
						category: '餐饮',
						amount: '-35.00',
						time: '12:30',
						type: 'expense',
						color: '#FF8C00'
					},
					{
						icon: '💰',
						title: '工资',
						category: '收入',
						amount: '+8000.00',
						time: '09:00',
						type: 'income',
						color: '#32CD32'
					},
					{
						icon: '🚗',
						title: '打车费',
						category: '交通',
						amount: '-25.00',
						time: '08:15',
						type: 'expense',
						color: '#4682B4'
					},
					{
						icon: '☕',
						title: '咖啡',
						category: '餐饮',
						amount: '-18.00',
						time: '15:20',
						type: 'expense',
						color: '#8B4513'
					},
					{
						icon: '🎁',
						title: '奖金',
						category: '收入',
						amount: '+500.00',
						time: '16:00',
						type: 'income',
						color: '#FFD700'
					}
				]
			}
		},
		onLoad() {
			this.initPage()
		},
		onUnload() {
			this.cleanup()
		},
		methods: {
			// 初始化页面
			initPage() {
				this.loadThemes()
				this.setupThemeListener()
				this.updateDate()
			},
			
			// 加载主题数据
			loadThemes() {
				this.themes = themeManager.getThemes()
				this.currentTheme = themeManager.getCurrentTheme()
			},
			
			// 设置主题监听器
			setupThemeListener() {
				this.themeListener = themeManager.addListener((theme) => {
					this.currentTheme = theme
				})
			},
			
			// 清理资源
			cleanup() {
				if (this.themeListener) {
					this.themeListener()
				}
			},
			
			// 更新日期
			updateDate() {
				const now = new Date()
				const year = now.getFullYear()
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				this.currentDate = `${year}-${month}-${day}`
			},
			
			// 切换主题
			switchTheme(themeId) {
				themeManager.setTheme(themeId)
				
				// 添加切换反馈
				uni.vibrateShort()
				uni.showToast({
					title: `已切换到${themeManager.getTheme(themeId).name}主题`,
					icon: 'success',
					duration: 1500
				})
			},
			
			// 获取标签页样式
			getTabStyle(theme) {
				const isActive = theme.id === this.currentTheme.id
				
				return {
					backgroundColor: isActive ? theme.colors.primary : 'transparent',
					color: isActive ? theme.colors.textInverse : theme.colors.primary,
					borderColor: theme.colors.primary
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';
	
	.container {
		background: $cute-gradient-bg;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}
	
	
	/* 页面头部 */
	.page-header {
		position: relative;
		height: 280rpx;
		margin-top: calc(var(--status-bar-height) + 88rpx); // 为导航栏预留空间
		margin-bottom: 30rpx;
		overflow: hidden;
	}
	
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $cute-gradient-primary;
	}
	
	.header-content {
		position: relative;
		z-index: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: calc(var(--status-bar-height) + 30rpx);
	}
	
	.page-title {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 15rpx;
	}
	
	.page-subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
	}
	
	/* 主题切换器 */
	.theme-switcher-section {
		margin: 0 30rpx 40rpx;
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.switcher-title {
		margin-bottom: 25rpx;
		text-align: center;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: $cute-text-primary;
	}
	
	.theme-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		justify-content: center;
	}
	
	.theme-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 25rpx;
		border-radius: 20rpx;
		border: 2rpx solid;
		transition: all 0.3s;
		cursor: pointer;
		min-width: 120rpx;
		
		&:hover {
			transform: translateY(-5rpx);
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		}
		
		&.active {
			transform: translateY(-5rpx);
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
		}
	}
	
	.tab-icon {
		font-size: 32rpx;
		margin-bottom: 8rpx;
	}
	
	.tab-name {
		font-size: 22rpx;
		font-weight: 500;
	}
	
	/* 预览区域 */
	.preview-section {
		margin: 0 30rpx;
	}
	
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: $cute-text-primary;
		margin-bottom: 30rpx;
		text-align: center;
	}
	
	/* 预览卡片 */
	.preview-card {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: $cute-text-primary;
	}
	
	.card-date {
		font-size: 24rpx;
		color: $cute-text-tertiary;
	}
	
	.balance-overview {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}
	
	.balance-item {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 15rpx;
		padding: 20rpx;
		background: $cute-bg-primary;
		border-radius: 15rpx;
		
		&.income .balance-amount {
			color: $cute-success;
		}
		
		&.expense .balance-amount {
			color: $cute-error;
		}
		
		&.total .balance-amount {
			color: $cute-warning;
		}
	}
	
	.balance-icon {
		font-size: 36rpx;
	}
	
	.balance-info {
		flex: 1;
	}
	
	.balance-label {
		display: block;
		font-size: 24rpx;
		color: $cute-text-tertiary;
		margin-bottom: 5rpx;
	}
	
	.balance-amount {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
	}
	
	/* 记录预览 */
	.records-preview {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.records-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
	}
	
	.records-title {
		font-size: 28rpx;
		font-weight: 600;
		color: $cute-text-primary;
	}
	
	.view-all {
		font-size: 24rpx;
		color: $cute-primary;
	}
	
	.records-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.record-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 15rpx;
		background: $cute-bg-primary;
		border-radius: 15rpx;
		transition: all 0.3s;
		
		&:hover {
			transform: translateX(10rpx);
			box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.1);
		}
	}
	
	.record-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: white;
	}
	
	.record-content {
		flex: 1;
	}
	
	.record-title {
		display: block;
		font-size: 28rpx;
		color: $cute-text-primary;
		font-weight: 500;
		margin-bottom: 5rpx;
	}
	
	.record-category {
		font-size: 22rpx;
		color: $cute-text-tertiary;
	}
	
	.record-amount {
		text-align: right;
	}
	
	.amount-text {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 5rpx;
		
		&.income {
			color: $cute-success;
		}
		
		&.expense {
			color: $cute-error;
		}
	}
	
	.record-time {
		font-size: 20rpx;
		color: $cute-text-tertiary;
	}
	
	/* 按钮预览 */
	.buttons-preview {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.buttons-title {
		font-size: 28rpx;
		font-weight: 600;
		color: $cute-text-primary;
		margin-bottom: 25rpx;
		text-align: center;
	}
	
	.buttons-group {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		justify-content: center;
	}
	
	.demo-btn {
		padding: 20rpx 40rpx;
		border-radius: $cute-border-radius;
		border: none;
		font-size: 26rpx;
		font-weight: 500;
		transition: all 0.3s;
		
		&.primary {
			background: linear-gradient(135deg, $cute-primary, $cute-primary-light);
			color: $cute-text-inverse;
		}
		
		&.secondary {
			background: linear-gradient(135deg, $cute-accent, $cute-accent-light);
			color: $cute-text-inverse;
		}
		
		&.success {
			background: linear-gradient(135deg, $cute-success, #32CD32);
			color: $cute-text-inverse;
		}
		
		&.warning {
			background: linear-gradient(135deg, $cute-warning, #FFD700);
			color: $cute-text-primary;
		}
		
		&.error {
			background: linear-gradient(135deg, $cute-error, #FF6B6B);
			color: $cute-text-inverse;
		}
		
		&:hover {
			transform: translateY(-3rpx);
			box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
		}
	}
	
	/* 输入框预览 */
	.inputs-preview {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.inputs-title {
		font-size: 28rpx;
		font-weight: 600;
		color: $cute-text-primary;
		margin-bottom: 25rpx;
		text-align: center;
	}
	
	.inputs-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.demo-input, .demo-textarea {
		background: $cute-bg-primary;
		border: 2rpx solid $cute-border;
		border-radius: $cute-border-radius;
		padding: 24rpx;
		font-size: 28rpx;
		color: $cute-text-primary;
		transition: all 0.3s;
		
		&:focus {
			border-color: $cute-primary;
			box-shadow: 0 0 0 4rpx rgba(144, 238, 144, 0.1);
			outline: none;
		}
		
		&::placeholder {
			color: $cute-text-tertiary;
		}
	}
	
	.demo-textarea {
		height: 120rpx;
		resize: none;
	}
	
	/* 标签预览 */
	.tags-preview {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.tags-title {
		font-size: 28rpx;
		font-weight: 600;
		color: $cute-text-primary;
		margin-bottom: 25rpx;
		text-align: center;
	}
	
	.tags-group {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		justify-content: center;
	}
	
	.demo-tag {
		background: $cute-accent-light;
		color: $cute-text-inverse;
		padding: 12rpx 24rpx;
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 500;
		transition: all 0.3s;
		
		&:hover {
			transform: translateY(-3rpx);
			background: $cute-accent;
		}
	}
	
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.balance-overview {
			flex-direction: column;
		}
		
		.theme-tabs {
			grid-template-columns: repeat(3, 1fr);
		}
		
		.buttons-group {
			flex-direction: column;
			align-items: stretch;
		}
	}
</style>